<template>
    <div class='app-container'>
    <div class="app-box">
        <div class='title'>
            <div class='right-top'><div class='luru'><i class="iconfont icon-baoxianchanpin now"></i>保单登记信息
            <span class="returnbtn">
				<el-button style="float: right;" size='mini' type='info' @click="$router.back(-1)">返回</el-button>
			</span>
            </div></div>
            <div class="d-box">
	            <div class="unit-row" >
	              <div class="unit-text">
	                <span class="unit-label"> 提交时间：</span>
	                <span class="unit-info">{{data.creationTime}}</span>
	              </div>
	              <div class="unit-text">
	                <span class="unit-label">
	                  提交人(登录名)：
	                </span>
	                <span class="unit-info" v-if="data.creatorUser!=null">
	                  {{data.creatorUser}}
	                </span>
	                <span class="unit-info" v-if="data.creatorUser==null">
	                  -
	                </span>
	              </div>
	            </div>
	            <div class="unit-row">
	              <div class="unit-text">
	                <span class="unit-label">
	                  提交条数：
	                </span>
	                <span class="unit-info">
	                  {{data.totalCount}}
	                </span>
	              </div>
	              <div class="unit-text">
	                <span class="unit-label">
	                  提交状态：
	                </span>
	                <span class="unit-info">
	                  进度{{data.succedCount + data.failedCount}}/{{data.totalCount}},成功提交{{data.succedCount}},失败{{data.failedCount}},
	                </span>
	              </div>
	              
	            </div>
	        </div>
        </div>
        <div class='table1'>
        <el-table :data="items1" style="width: 100%" class='table'>
            <el-table-column prop="guaranteeSlipNumber" label="保单号" width="280"></el-table-column>
            <el-table-column label="工号" width="180">
              <template slot-scope='scope'>
                <p>{{scope.row.staffAccount}}</p>
                <p>{{scope.row.describe}}</p>
              </template>
            </el-table-column>
            <el-table-column prop="userName" label="业务员"></el-table-column>
            <el-table-column  label="执行结果">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 1">
                        执行中
                    </span>
                    <span v-if="scope.row.state == 2">
                        成功
                    </span>
                    <span v-if="scope.row.state == 3">
                        {{errormessage}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="importDate" label="提交完成时间" width="200"></el-table-column>
            <el-table-column prop="address" label="操作" align='right'>
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 3" >
                        <a @click="handleCommand(scope.row.id)" class='relead'>重新提交</a>
                    </span>
                    <span v-if="scope.row.state != 3" >
                        <a @click="handleCommand" class='relead'>-</a>
                    </span>
                </template>
            </el-table-column>
        </el-table>
        </div>
         <div class='page-right'>
            <el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal" class='util-page' size='mini'></el-pagination>
           
        </div>
    </div>
    </div>
</template>
<script>
    export default{
       data(){
        return {
            data:{},
            items1:null,
            pagetotal:null,
            currentPage:1,
            errormessage:'',
            currentid:''
        }
    },
    mounted(){
      this.baodanlist()
       console.log(this.$route.params.id) 
    },
    methods:{
        baodanlist(pageindex){
            let params={
                id:this.$route.params.id,
                pageIndex:pageindex,
            }
            console.log(this.$route.params.id)
            this.post(params,'services/app/guaranteeSlip/GuaranteeSlipBatchDetailList').then(rs=>{
                console.log(rs)
                let data = rs.result;
                let currentid=data.id
                this.currentid=currentid
                this.data = data;
                this.items1=rs.result.items;
                this.pagetotal=rs.result.totalCount;
                this.errormessage=rs.result.items.errorMsg
                if(pageindex){
                       this.currentPage= pageindex
                    }else{
                        this.currentPage=1
                    }
                // for(var i=0;i<this.items.length;i++){
                //     let state1=rs.result.items[i].state;
                //     if(state1==1){
                //         this.condition='成功'
                //     }else if(state1==0){
                //         this.condition='执行中'
                //     }else if(state1==2){
                //         this.condition='失败'
                //     }
                // }
                
                // this.creationtime=rs.result.creationTime
                // this.creatoruser=rs.result.creatorUser
                // this.totalcount=rs.result.totalCount
                // this.failcount=rs.result.failedCount
                // this.succedcount=rs.result.succedCount
                // this.waiting=rs.result.waitingCount
                // thisrs.result.items
            })
        },
        handleCurrentChange(val){
            this.baodanlist(val)
        },
         handleCommand(val){
            const me = this;
        this.$confirm('确定重新提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
            let params={
              id:val
            };
              this.post(
                params,
                "services/app/guaranteeSlip/UpdateBatchDetailState"
              ).then(rs => {
                if (rs.success) {
                  this.$notify({
                    title: '成功',
                    message: '提交成功',
                    type: 'success'
                  });
                  this.baodanlist(this.currentPage)
                }
              })
         
        })
        .catch(() => {
           this.$message({
            type: 'info',
            message: '已取消提交'
          });
        });
       }

 
    }
    
}
</script>
<style lang="scss" scoped>
.now {
  color: #ee6000;
  font-size: 18px;
  margin-right: 12px;
}
.d-box{
	background: #eaf5fb;
    //width: 100%;
    padding: 15px 30px;
    margin-bottom: 30px;
}
.padbot16{padding-bottom: 16px;}
    .title{
        
        .right-top{
            width: 100%;margin-bottom: 30px;
            position: relative;
            .luru{
                color: #555;
                font-size: 18px;
            }
        }

        .unit-row {
            display: inline-block;
            font-size: 12px;
            .unit-text {
            	display: inline-block;
            	line-height: 20px;
              	flex: 1;margin-right:30px;
              .unit-label {
                color: #999;
                float: left;
              }
		      .unit-info {
		        color: #333;
		        float: left;
		      }
		    }
		    }}
    .table{
      p{
        margin:0;
      }
    }
    .table1{
     
    }
    .page-right{
        width: 100%;
        text-align: right;
        padding:52px 20px 20px 20px;
    }
    .relead{
      color: #027dea
    }
</style>